<template>
  <div id="container" />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'

export default {

  data() {
    return {
      // map: shallowRef(null)
      disProvince: '',
      adCode: 130000,
      depth: 2,
      colors: {},
      map: shallowRef(null)
    }
  },
  created() {
    this.initMap()
    // this.initPro()
    // this.getColorByAdcode()
  },
  methods: {

    initMap() {
      AMapLoader.load({
        key: 'b227b92322ed5b5c20c236fc6ff2a362', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ControlBar', 'AMap.ToolBar', 'AMap.InfoWindow', 'AMap.PolyEditor', 'AMap.Driving', 'AMap.Polyline'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        var map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 6, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
          terrain: true, // 开启地形图
          pitch: 0, // 角度
          showBuildingBlock: false,
          resizeEnable: true,
          layers: [new AMap.TileLayer.Satellite(), // 路网
            new AMap.TileLayer.RoadNet()]
        })

        const marker = new AMap.Marker({
          // 西安
          position: new AMap.LngLat(108.998736, 34.216224),
          // 将 html 传给 content
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-13, -30)
        })

        const marker1 = new AMap.Marker({
          // 北京
          position: new AMap.LngLat(116.397428, 39.90923),
          // 将 html 传给 content
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-13, -30)
        })

        const icon2 = new AMap.Icon({
          image: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
          size: new AMap.Size(32, 32),
          imageSize: new AMap.Size(20, 30)

        }) // 更改图标2的样式

        const marker2 = new AMap.Marker({
          // 尾矿库
          position: new AMap.LngLat(106.405363, 36.531179),
          // 将 html 传给 content
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-13, -30),
          icon: icon2
        })

        const marker3 = new AMap.Marker({
          // marker3
          position: new AMap.LngLat(116.839534, 36.942455),
          // 将 html 传给 content
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-13, -30)
        })

        const marker4 = new AMap.Marker({
          // marker4
          position: new AMap.LngLat(121.813076, 37.209476),
          // 将 html 传给 content
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-13, -30)
        })

        const marker5 = new AMap.Marker({
          // marker5
          position: new AMap.LngLat(117.633591, 34.354439),
          // 将 html 传给 content
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-13, -30)
        })

        // AMap.event.addListener(map, 'click', getLnglat);

        // 构建自定义信息窗体
        var infoWindow = new AMap.InfoWindow({
          anchor: 'top-left',
          content: '这是信息窗体！这是测试信息窗体！'
        })

        var infoWindow1 = new AMap.InfoWindow({
          anchor: 'top-left',
          content: '<div class="markerClass">这是信息窗体！这是测试信息窗体！</div>'
        })

        var infoWindow2 = new AMap.InfoWindow({
          anchor: 'top-left',
          content: '<div class="markerClass">marker2</div>'
        })

        var infoWindow3 = new AMap.InfoWindow({
          anchor: 'top-left',
          content: '<div class="markerClass">marker3</div>'
        })

        var infoWindow4 = new AMap.InfoWindow({
          anchor: 'top-left',
          content: '<div class="markerClass">marker4</div>'
        })

        var infoWindow5 = new AMap.InfoWindow({
          anchor: 'top-left',
          content: '<div class="markerClass">marker5</div>'
        })

        // infoWindow.open(this.map,[116.401337,39.907886])

        // var one = infoWindow.open(this.map, [108.998736, 34.216224])
        // var two = infoWindow.open(this.map, [116.397428, 39.90923])

        // 鼠标点击marker弹出自定义的信息窗体
        marker.on('click', function() {
          infoWindow.open(map, marker.getPosition())
          // infoWindow.open(this.map, [116.401337,39.907886]);
        })

        // marker.addListener("click", () => {
        //   infowindow.open({
        //     anchor: marker,
        //     map,
        //   });
        // });

        marker1.on('click', function(e) {
          infoWindow1.open(map, marker1.getPosition())
          // infoWindow.open(this.map, [116.397428, 39.90923]);
          // infoWindow.open(this.map, [116.401337,39.907886]);
        })

        marker2.on('click', function(e) {
          infoWindow2.open(map, marker2.getPosition())
        })

        marker3.on('click', function(e) {
          infoWindow3.open(map, marker3.getPosition())
        })

        marker4.on('click', function(e) {
          infoWindow4.open(map, marker4.getPosition())
        })

        marker5.on('click', function(e) {
          infoWindow5.open(map, marker5.getPosition())
        })

        map.add(marker)

        function blinkMarker() {
          const marker = document.querySelector('.marker-icon')
          marker.style.animation = 'blink-animation 1s infinite'
        }

        setInterval(blinkMarker, 1000)

        // 关闭信息窗体
        // function closeInfoWindow() {
        //     map.clearInfoWindow();
        // }
        // function markerClick(e) {
        //   infoWindow.setContent(e.target.content)
        //   infoWindow.open(map, e.target.getPosition())
        // }
        var $ = function(elementId) {
          return document.getElementById(elementId)
        }

        var lnglatInput = $('lnglat')
        map.on('mousemove', function(e) {
          console.log('e', e)
          console.log('e.lnglat.lng', e.lnglat.lng)
          console.log('e.lnglat.lat', e.lnglat.lat)
          // lnglatInput.value = ${'经度': e.lnglat.lng.toString(), '维度': e.lnglat.lat.toString() }
          lnglatInput.value = '经度' + e.lnglat.lng.toString() + ',' + '维度' + e.lnglat.lat.toString()
        })

        map.add([marker, marker1, marker2, marker3, marker4, marker5])
      }).catch(e => {
        console.log(e)
      })
    }
    // 创建省份图层

    // initPro(code, dep) {
    //   dep = typeof dep === 'undefined' ? 2 : dep
    //   this.adCode = code
    //   this.depth = dep

    // disProvince && disProvince.setMap(null)

    // disProvince = new AMap.DistrictLayer.Province({
    //   zIndex: 12,
    //   adcode: [code],
    //   depth: dep,
    //   styles: {
    //     'fill': function(properties) {
    //       // properties为可用于做样式映射的字段，包含
    //       // NAME_CHN:中文名称
    //       // adcode_pro
    //       // adcode_cit
    //       // adcode
    //       var adcode = properties.adcode
    //       return getColorByAdcode(adcode)
    //     },
    //     'province-stroke': 'cornflowerblue',
    //     'city-stroke': 'white', // 中国地级市边界
    //     'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
    //   }
    // })

    // disProvince.setMap(map)
    // },

    // 颜色辅助方法

    // getColorByAdcode(adcode) {
    //   if (!colors[adcode]) {
    //     var gb = Math.random() * 155 + 50
    //     colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)'
    //   }

    //   return colors[adcode]
    // }
  }
}

// const map = shallowRef(null);
// import { reactive } from "vue";

// const state = reactive({
//   path: [],
//   current_position: []
// });

// initMap();
</script>

<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 80vh;
}

.markerClass{
       margin-left: 100px;
       margin-top: 100px;
       width: 18px;
       height: 18px;
       /*transform: translate3d(0px, 0px, 0px);*/
       position: relative;
       outline: none;
       background-color: #dd524d;
       box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
       border-radius: 100%;
       transform-origin: 0 0;
       display: block;
       opacity: 0.7;
   }
   .markerClass::after {
       content: "";
       -webkit-border-radius: 100%;
       border-radius: 100%;
       height: 300%;
       width: 300%;
       position: absolute;
       margin: -100% 0 0 -100%;
       box-shadow: 0 0 6px 2px #dd524d;
       animation: pulsate 1s ease-out;
       animation-iteration-count: infinite; /*无穷反复*/
       animation-delay: 1.1s;
   }
   @keyframes pulsate {
       0% {
           transform: scale(0.1, 0.1);
           opacity: 0;
           filter: alpha(opacity=0);
       }
       50% {
           opacity: 1;
           filter: none;
       }
       100% {
           transform: scale(1.2, 1.2);
           opacity: 0;
           filter: alpha(opacity=0);
       }
   }

</style>
